<template>
  <div class='row-editable-table'>
    <div class='button-area'>
      <a-button class='editable-add-btn' @click='showModal' v-show='addButton'>
        添加
      </a-button>
      <a-button class='editable-clear-btn' @click='clearDataSource' v-show='clearButton'>
        清空
      </a-button>
    </div>
    <a-table
      ref='table'
      bordered
      :rowKey='rowKey'
      size='small'
      :scroll='{y:tableHeight}'
      :pagination='false'
      :data-source='dataSource'
      :columns='columns'
    >
      <span slot='action' slot-scope='text, record,index'>
          <a :disabled='disableDelete' @click='handleDelete(index)'>删除</a>
      </span>
    </a-table>
    <choose-modal
      ref='modal'
      :mode='mode'
      :chooseUrl='chooseUrl'
      :tableFields='chooseColumns'
      @choose='handleChoose'
      :searchCondition='conditions'
    >
    </choose-modal>
  </div>
</template>
<script>
import ChooseModal from './ChooseModal'

export default {
  name: 'RowEditableTable',
  components: {
    ChooseModal
  },
  props: {
    rowKey: {
      type: String,
      default: function() {
        return 'id'
      }
    },
    tableHeight: {
      type: Number,
      default: function() {
        return 200
      }
    },
    chooseUrl: {
      type: String,
      default: function() {
        return ''
      }
    },
    columns: {
      type: Array,
      default: function() {
        return []
      }
    },
    chooseColumns: {
      type: Array,
      default: function() {
        return []
      }
    },
    conditions: {
      type: Array,
      default: function() {
        return []
      }
    },
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    addButton: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    clearButton: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    disableDelete: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    mode: {
      type: String,
      default: function() {
        return 'radio'
      }
    }
  },
  watch: {
    data: function(val) {
      this.dataSource = val ? val : []
    }
  },
  data() {
    return {
      dataSource: this.data ? this.data : []
    }
  },
  methods: {
    clear() {
      this.dataSource = []
    },
    showModal() {
      this.$refs.modal.show()
    },
    clearDataSource() {
      this.dataSource = []
      this.$emit('update:data', this.dataSource)
    },
    handleChoose(value) {
      //add之前对数据做自定义处理
      this.$emit('beforeAdd', value, this.dataSource)
      value.forEach(item => {
        let index = this.dataSource.findIndex(v => v[this.rowKey] == item[this.rowKey])
        console.log(index)
        if (index == -1) {
          delete item.children
          this.dataSource.push(item)
        }
      })
      this.$emit('afterAdd', value, this.dataSource)
      this.$emit('update:data', this.dataSource)
    },
    handleDelete(index) {
      this.dataSource.splice(index, 1)
      this.$emit('update:data', this.dataSource)
    }
  }
}
</script>
<style lang='less' scoped>
.button-area {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .editable-add-btn {
    margin-bottom: 8px;
  }

  .editable-clear-btn {
    margin-bottom: 8px;
  }
}

.row-editable-table {
  margin-top: 8px;
  padding: 5px 5px;
}
</style>